<style lang="scss">
  .dept {
    .el-main {
      padding: 16px 16px 0px 16px;
      .el-table {
        height: calc(100vh - 140px);
        margin-bottom: 14px;
      }
    }
  }
</style>

<template>
  <el-container class="dept">
    <!-- 主要区域容器 -->
    <el-main>
      <el-table :data="tableItem.list" stripe :height="tableHeight" v-loading="loadingTable">
        <el-table-column  type="index" label="排序" align="center" width="120px"></el-table-column>
        <el-table-column prop="bmmc" label="处室名称" align="center"></el-table-column>
        <el-table-column prop="bmjc" label="处室简称" align="center"></el-table-column>
        <el-table-column prop="enabledGd" label="当前状态" align="center">
          <template slot-scope="scope">
            <i v-if="scope.row.enabledGd === false" class="el-icon-error" style="color: #F04134; font-size: 16px;"></i>
            <i v-else class="el-icon-success" style="color: #67C23A; font-size: 16px;"></i>
          </template>
        </el-table-column>
        <el-table-column prop="operations" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              v-for="(item, index) in scope.row.operationsModelList"
              :key="index" :type="item.type" plain size="mini" :icon="item.icon"
              v-bind:class="'operations-'+item.handleMethod"
              @click="operationClick(item.handleMethod, scope.row)"
            >{{item.label}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="lastTime" label="维护时间" align="center" :formatter="formatDate"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableItem.pageNum"
        :page-size="tableItem.pageSize"
        :page-sizes="[20, 30, 50]"
        :total="tableItem.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="float: right;"
      ></el-pagination>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    data () {
      return {
        // 表格高度
        tableHeight: -1,
        // 表格列表
        tableItem: {},
        // 表格数据查询条数
        pageParam: {
          pageNum: 1,
          pageSize: 100
        },
        loadingTable: false
      }
    },
    methods: {
      // 获取督办处室分页列表
      getDeptPage () {
        const _this = this
        _this.loadingTable = true
        _this.$axios.post(_this.$api.dept.page, _this.pageParam).then(function (rs) {
            if (rs) {
              _this.tableItem = rs
              _this.loadingTable = false
            }
          })
      },
      // 分页
      handleSizeChange: function (size) {
        this.pageParam.pageSize = size
        this.getDeptPage()
      },
      // 分页
      handleCurrentChange: function (currentPage) {
        this.pageParam.pageNum = currentPage
        this.getDeptPage()
      },
      // 日期格式化
      formatDate: function (row, column) {
        const _this = this
        var date = row.lastTime
        if (date === undefined) {
          return ''
        }
        return _this.$moment(date).format('YYYY年MM月DD日 HH时mm分')
      },
      // 操作点击事件
      operationClick (method, row) {
        switch (method) {
          case 'able':
            this.ableFn(row)
            break
          case 'stop':
            this.stopFn(row)
            break
        }
      },
      // 启用方法
      ableFn (item) {
        const _this = this
        _this.$confirm('此操作将会启用该处室，是否继续?', '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          })
          .then(() => {
            _this.$axios
              .post(_this.$api.dept.able, {
                bmid: item.bmid,
                enabledGd: true
              })
              .then(function (rs) {
                if (rs) {
                  _this.$message({
                    message: '操作成功!',
                    showClose: true,
                    type: 'success'
                  })
                  _this.getDeptPage()
                }
              })
          })
          .catch(() => {})
      },

      // 停用方法
      stopFn (item) {
        const _this = this
        _this
          .$confirm('此操作将会停用该处室，是否继续?', '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          })
          .then(() => {
            _this.$axios
              .post(_this.$api.dept.stop, {
                bmid: item.bmid,
                enabledGd: false
              })
              .then(function (rs) {
                if (rs) {
                  _this.$message({
                    message: '操作成功!',
                    showClose: true,
                    type: 'success'
                  })
                  _this.getDeptPage()
                }
              })
          })
          .catch(() => {})
      }
    },
    created: function () {
      this.getDeptPage()
    }
  }
</script>
